<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery basic</title>
    <style type="text/css">
        .selected 
        {
            background-color:Yellow;
        }
    </style>
    <script src="./jquery.js" type="text/javascript"></script>
    <script src="./jquery.easydrag.handler.beta2.js" type="text/javascript"></script>
</head>
<body>
    <div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:50px" >
        <div id="divTitle" style="width:100%;height:25px;background:lavender">
            &nbsp;Title
        </div>
        <div style="width:100%">
            
        </div>
    </div>

    <h3>jQuery Constructor</h3>
    <ul>
        <li>jQuery(expression,context)</li>
        <li>jQuery(html)</li>
        <li>jQuery(elements)</li>
        <li>jQuery(fn)</li>
    </ul>
    
    <input value="1" /> + 
    <input value="2" />
    <input type="button" value="=" />
    <label>&nbsp;</label>
    
    
    <script type="text/javascript">
        jQuery("ul>li:first").addClass("selected");
        $('ul').append($('<li>new item</li>'));
        $(document).ready(function(){
            $('ul').css('color','red');
        });
        //$(function(){
        //    alert('welcome to jQuery');
        //});
        
        $("input[type='button']").click(function(){
            var i = 0;
            $("input[type='text']").each(function(){
                i += parseInt($(this).val());
            });
            $('label').text(i);
        });
        $('input:lt(2)')
            .add('label')
            .css('border','none')
            .css('borderBottom','solid 1px navy')
            .css({'width':'30px'});
            
        $(document).ready( function()
        {
            $("#divPanel").easydrag();
        });
    </script>

</body>
</html>
